<template>
  <div class="questionnaire-card" :class="props.type" @click="cardClickHandle">
    <div class="questionnaire-board">
      <div class="questionnaire-board-title">{{ props.title }}</div>
      <!-- 创建的问卷独有结构 -->
      <button class="share btn" v-if="props.type === 'created'" open-type="share" :data-id="props.id"
        :data-title="props.title" @click.prevent>分享</button>
      <!-- 收到的、已过期的问卷独有结构 -->
      <button class="generate-line btn" v-if="props.type === 'received' || props.type === 'expired'">生成台词</button>

      <!-- 被删除的问卷独有结构 -->
      <button class="restore btn" v-if="props.type === 'deleted'"
        @click.prevent="questionnaireListStore.recoverQuestionnaire(props.id)">恢复问卷</button>

      <!-- 通用结构 -->
      <button class="copy-btn btn" @click.prevent="copyClickHandle">复制一份</button>
      <!-- XXX 暂时不显示已过期问卷的反馈时间，待后续确定再修改 -->
      <text class="feedback time" v-if="props.type === 'received'">
        {{ props.fillInPerson }}填写
      </text>
      <text class="create time">婚礼时间：{{ props.weddingDate }}</text>
    </div>
    <text class="questionnaire-title">{{ props.title }}</text>
  </div>
</template>

<script lang="ts" setup>
import { useQuestionnaireList } from '@/stores/questionnaire-list';
import { navigateTo } from '@/utils/navigate';
import { showToast } from '@/utils/tools';

interface Props {
  id: string,
  type: QuestionnaireCategory,
  title: string,
  feedbackDate: string,
  weddingDate: string,
  /** 填写人 */
  fillInPerson?: string,
}

const props = withDefaults(defineProps<Props>(), {
  /** 问卷类型 */
  type: 'created',
  /** 问卷标题 */
  title: '问卷一',
  /** 反馈时间 */
  feedbackDate: '2007-08-31',
  /** 创建时间 */
  weddingDate: '2007-08-31'
})

const questionnaireListStore = useQuestionnaireList();

/** 卡片组件点击事件 */
const cardClickHandle = () => {
  console.log('cardClickHandle');
  // 跳转到「问卷查看」页面
  navigateTo('questionnaire-view', {
    // 问卷类型
    questionnaireCategory: props.type,
    questionnaireId: props.id,
    // 来源
    from: 'questionnaire-card'
  });
}

/**
 * 「复制一份」按钮点击事件
 */
const copyClickHandle = async () => {
  // 跳转到「编辑标题和描述」页面
  navigateTo('questionnaire-edit-title-describe', {
    isCopy: 'true',
    originalQuestionnaireId: props.id,
    originalQuestionnaireType: props.type
  })
}
</script>

<style lang="scss" scoped>
// 各种类型问卷卡牌通用的样式
.questionnaire-card {
  width: 28.7179vw;
  height: 46.6667vw;
  display: grid;
  grid-template:
    'board' 39.2308vw
    'title' 5.1282vw;
  grid-gap: 12px 0;

  // 问卷面板（不含具体的定位样式代码）
  .questionnaire-board {
    box-sizing: border-box;
    width: 100%;
    text-align: center;

    font-size: 19.23rpx;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px rgba(190, 190, 190, 0.25);

    padding-top: 10px;
    display: grid;

    position: relative;

    // 顶部的装饰性线条
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);

      width: 100%;
      height: 2px;
      border-radius: 7px;
      background-color: #17CE92
    }

    // 面板上的标题
    .questionnaire-board-title {
      font-size: 2.5641vw;
      font-weight: 600;
      color: #333333;
    }

    // 面板上的按钮
    .btn {
      width: 19.4872vw;
      height: 5.641vw;
      border-radius: 4px;

      text-align: center;
      line-height: 5.641vw;

      font-size: 2.5641vw;
      color: #fff;
      background-color: #FA9E18;

      filter: drop-shadow(0px 1px 2px rgba(133, 159, 132, 0.25));
    }

    // 面板上的时间（创建时间、接收时间）
    .time {
      font-size: 7px;
      text-align: CENTER;
      color: rgba(0, 0, 0, 0.40);
      line-height: 7px;
    }
  }

  // 问卷名称
  .questionnaire-title {
    grid-area: title;
    font-size: 19.23rpx;

    font-weight: 600;
    text-align: center;
    color: #333333;
  }
}

// 已创建的问卷
.created {
  .questionnaire-board {
    grid-template:
      'title' 3.5897vw
      '.' 22.9999px
      'copy-btn' 5.641vw
      '.' 8px
      'share-btn' 5.641vw
      '.' 25px
      'create-time' 10px;
    justify-items: center;

    // 面板上的标题
    .questionnaire-board-title {
      grid-area: title;
    }

    // 「复制一份」按钮
    .copy-btn {
      grid-area: copy-btn;
    }

    // 分享按钮
    .share {
      grid-area: share-btn;
      background-color: #F85456;
    }

    // 创建时间
    .time {
      grid-area: create-time;
    }
  }
}

// 收到的问卷
.received {

  .questionnaire-board {

    grid-template:
      'title' 3.5897vw
      '.' 22.9999px
      'copy-btn' 5.641vw
      '.' 8px
      'generate-line-btn' 5.641vw
      '.' 22px
      'feedback-time' 10px
      '.' 2px
      'create-time' 10px;
    justify-items: center;

    // 面板上的标题
    .questionnaire-board-title {
      grid-area: title;
    }

    // 「生成台词」按钮
    .generate-line {
      grid-area: generate-line-btn;
      background-color: #17CE92;
    }


    // 「复制一份」按钮
    .copy-btn {
      grid-area: copy-btn;
    }

    // 反馈时间
    .feedback {
      grid-area: feedback-time;
    }

    // 创建时间
    .create {
      grid-area: create-time;
    }
  }
}

// 已过期的问卷
.expired {
  .questionnaire-board {
    grid-template:
      'title' 3.5897vw
      '.' 22.9999px
      'copy-btn' 5.641vw
      '.' 8px
      'generate-line-btn' 5.641vw
      '.' 22px
      'feedback-time' 10px
      '.' 2px
      'create-time' 10px;
    justify-items: center;

    // 面板上的标题
    .questionnaire-board-title {
      grid-area: title;
    }

    // 「生成台词」按钮
    .generate-line {
      grid-area: generate-line-btn;
      background-color: #999999;
    }


    // 「复制一份」按钮
    .copy-btn {
      grid-area: copy-btn;
    }

    // 反馈时间
    .feedback {
      grid-area: feedback-time;
    }

    // 创建时间
    .create {
      grid-area: create-time;
    }
  }
}

// 已删除的问卷
.deleted {
  .questionnaire-board {

    grid-template:
      'title' 3.5897vw
      '.' 22.9999px
      'copy-btn' 5.641vw
      '.' 8px
      'restore' 5.641vw
      '.' 31px
      'create-time' 10px;
    justify-items: center;

    // 面板上的标题
    .questionnaire-board-title {
      grid-area: title;
    }

    // 「复制一份」按钮
    .copy-btn {
      grid-area: copy-btn;
    }

    // 「恢复问卷」按钮
    .restore {
      grid-area: restore;
      background-color: #17CE92;
    }

    // 创建时间
    .create {
      grid-area: create-time;
    }
  }
}
</style>
